<!-- 头部tab滚动条 -->
<template>
  <q-scroll-area
    id="scrollContainer"
    ref="scrollArea"
    horizontal
    :delay="1000"
    :thumb-style="thumbStyle"
    class="q-ml-lg rounded-borders scroll-container"
  >
    <slot /> <!-- 插槽  -->
  </q-scroll-area>
</template>

<script>
const tagAndTagSpacing = 16
export default {
  data () {
    return {
      thumbStyle: {
        right: '4px', borderRadius: '10px', background: '#9e9e9e', height: '4px', opacity: 1
      }
    };
  },

  components: {},

  computed: {
  },

  mounted() {
  },
  beforeUnmount() {
  },
  methods: {
    moveToTarget(tags, routerPath, visitedViews, tagEle) {
      const _container = this.$refs.scrollArea.$el
      const _containerWidth = Math.floor(_container.offsetWidth)
      const tagList = this.$parent.$refs.tag.$el
      const tagLists = this.$parent.$refs.tag
      const offsetLeftItem = Math.floor(tags.offsetLeft)
      if (routerPath === visitedViews[0].path) {
        this.$refs.scrollArea.setScrollPosition('horizontal',0)
      } else if (routerPath === visitedViews[visitedViews.length - 1].path) {
        this.$refs.scrollArea.setScrollPosition('horizontal',offsetLeftItem)
      } else {
        const currentIndex = visitedViews.findIndex(item => item.path === routerPath)
        const prevTag = tagEle[currentIndex - 1]
        const nextTag = tagEle[currentIndex + 1]

        const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing
        const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing
        const scrollLeft = this.$refs.scrollArea.getScrollPosition().left
        if (afterNextTagOffsetLeft > scrollLeft + _containerWidth) {
          let _left = afterNextTagOffsetLeft - _containerWidth
          this.$refs.scrollArea.setScrollPosition('horizontal',_left)
        } else if (beforePrevTagOffsetLeft < scrollLeft) {
          this.$refs.scrollArea.setScrollPosition('horizontal',beforePrevTagOffsetLeft)
        }
      }

    },
  }
}

</script>
<style lang='scss' scoped>
.scroll-container {
  padding: 0 !important;
  position: relative;
  height: 38px;
  line-height: 38px;
  width: 100%;
  white-space: nowrap;
  ::v-deep(.q-scrollarea__content) {
    height: 38px;
  }
  .q-scrollarea__content:hover{
    background: red;
  }
}
</style>
